<script setup>
import {computed, defineModel, defineProps, ref, provide, defineEmits} from "vue";
import {wordFormedTagContextKey} from "@/components/WordFormedTag/constants";
import {UPDATE_MODEL_EVENT} from "element-plus";
import {formsOutCssMapping} from "@/components/constants";

const emit = defineEmits([UPDATE_MODEL_EVENT]);
let theProps = defineProps(["theForm"]);

const model = defineModel();
// const theProps = defineProps(["theFormCounts"]);

const changeEvent = async (value) => {
    emit(UPDATE_MODEL_EVENT, value);
}

const modelValue = computed(() => {
    // console.log('getter in compute modelValue from WordFormedTagGroup with model.value : ',model.value);
    return model.value;
})

const styleObject = computed(() => {
    let resultObj = {};
    if (theProps.theForm) {
        let theForm = formsOutCssMapping[theProps.theForm];
        {
            resultObj.borderColor=`var(--color-` + theForm + `)`
        }
    }

    return resultObj;
})

provide(wordFormedTagContextKey, {
    modelValue,
    changeEvent,
})

</script>

<template>
    <div class="formsCheckGroup formsOut" :style="styleObject">
        <slot></slot>
    </div>
</template>

<style scoped>

</style>